* {
    padding: 0;
    margin: 0;
}

ul,
li {
    list-style-type: none;
}
/*主体部分*/

#content {
    width: 100%;
    height: 100%;
    /* top: 20%;
    left: 20%; */
    overflow: hidden;
    position: absolute;
}

.content-wrap {
    position: relative;
}

.content-wrap > li {
    background: #CAE1FF;
    color: red;
    float: left;
    overflow: hidden;
    position: relative;
}

li:nth-child(2) {
    background: #9BCD9B;
}

li:nth-child(3) {
    background: yellow;
}

button {
    width: 100px;
    height: 50px;
}

.button {
    position: absolute;
    bottom: 0;
}

.slowWalk {
    /*规定 @keyframes 动画的名称。*/
    animation-name: person-slow;
    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
    animation-duration: 950ms;
    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
    animation-iteration-count: infinite;
    /*动画切换的方式是一帧一帧的改变*/
    animation-timing-function: steps(1, start)
}

/* 普通慢走 */
@keyframes person-slow {
    0% {
        background-position: -0px -291px;
    }

    25% {
        background-position: -602px -0px;
    }

    50% {
        background-position: -302px -291px;
    }

    75% {
        background-position: -151px -291px;
    }

    100% {
        background-position: -0px -291px;
    }
}